<template>
  <div>
    <van-actionsheet v-model="show" title="物流信息">
      <van-steps direction="vertical" :active="0">
        <van-step>
          <h3>【城市】物流状态1</h3>
          <p>2016-07-12 12:40</p>
        </van-step>
        <van-step>
          <h3>【城市】物流状态2</h3>
          <p>2016-07-11 10:00</p>
        </van-step>
        <van-step>
          <h3>快件已发货</h3>
          <p>2016-07-10 09:30</p>
        </van-step>
      </van-steps>
    </van-actionsheet>
    <div v-if="orders" v-cloak>
      <van-panel :title="order.created | date('%F %T')" v-for="order in orders" :key="order.id">

        <!--包含整个购物车的div，定义一个外框 给外面留一点空白！定义一下字体-->
        <div class="cart-all-unpay">
          <!--二级div 包括1.显示商品内容和2.底部的按钮-->
          <!--1.显示商品缩略图和价钱数量的div-->
          <div class="cart-header">
            <!-- 1-1商品名图片-->
            <a class="cart-thumb">
              <img v-lazy="order.order_details[0].product.thumb" class="cart-image">
            </a>

            <div class="cart-content">
              <!-- 1-2-1商品名-->
              <div class="cart-title">
                {{order.order_details[0].product.title}}
                <span class="cart-price">{{order.total_price}}</span>
              </div>
              <!-- 1-2-2价钱数量-->
              <div class="cart-bottom">
                <!-- 1-2-2-1价钱-->
                <div class="cart-describe">
                  <span>这是一个神奇的小体验</span>
                </div>
                <!-- 1-2-2-2数量-->
                <div class="cart-num">
                  <span>×{{order.order_details | map(detail => detail.quantity) | sum }}</span>
                </div>
              </div>
            </div>
          </div>
          <div slot="footer" class="cart-footer">
            <!--          <span>实付金额：{{ order.total_price | yuan }} 数量：{{order.order_details | map(detail => detail.quantity) | sum }}</span>-->
            实付金额<span class="actualpay">：{{ order.total_price | yuan }} </span>
            <!--            <van-button round class="cart-button" size="mini" v-on:click="payment(order)">付款</van-button>-->
            <van-button round class="cart-button cart-button-receive" size="mini" v-on:click="logistics(order)">查看物流</van-button>
            <van-button round class="cart-button cart-button-receive" size="mini" v-on:click="bind(order)">绑定样本</van-button>
          </div>
        </div>
      </van-panel>
<!--      <van-panel :title="order.created | date('%F %T')" v-for="order in orders" :key="order.id">-->
<!--        &lt;!&ndash;包含整个购物车的div，定义一个外框 给外面留一点空白！定义一下字体&ndash;&gt;-->
<!--        <div class="cart-all">-->
<!--          &lt;!&ndash;二级div 包括1.显示商品内容和2.底部的按钮&ndash;&gt;-->
<!--          &lt;!&ndash;1.显示商品缩略图和价钱数量的div&ndash;&gt;-->
<!--          <div class="cart-header">-->
<!--            &lt;!&ndash; 1-1商品名图片&ndash;&gt;-->
<!--            <a class="cart-thumb">-->
<!--              <img v-lazy="order.order_details[0].product.thumb" class="cart-image">-->
<!--            </a>-->
<!--            &lt;!&ndash; 1-2商品名和商品价格&ndash;&gt;-->
<!--            <div class="cart-content">-->
<!--              &lt;!&ndash; 1-2-1商品名&ndash;&gt;-->
<!--              <div class="cart-title">-->
<!--                {{order.order_details[0].product.title}}-->
<!--                <span class="cart-price">{{order.total_price}}</span>-->
<!--              </div>-->
<!--              &lt;!&ndash; 1-2-2价钱数量&ndash;&gt;-->
<!--              <div class="cart-bottom">-->
<!--                &lt;!&ndash; 1-2-2-1价钱&ndash;&gt;-->
<!--                <div class="cart-describe">-->
<!--                  <span>这是一个神奇的小体验</span>-->
<!--                </div>-->
<!--                &lt;!&ndash; 1-2-2-2数量&ndash;&gt;-->
<!--                <div class="cart-num">-->
<!--                  <span>×{{order.order_details | map(detail => detail.quantity) | sum }}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          &lt;!&ndash;2.显示实付金额和按钮的div&ndash;&gt;-->
<!--          <div slot="footer" class="cart-footer">-->
<!--            &lt;!&ndash;          <span>实付金额：{{ order.total_price | yuan }} 数量：{{order.order_details | map(detail => detail.quantity) | sum }}</span>&ndash;&gt;-->
<!--            实付金额<span class="actualpay">：{{ order.total_price | yuan }} </span>-->
<!--&lt;!&ndash;            <van-button round class="cart-button" size="mini" v-on:click="payment(order)">付款</van-button>&ndash;&gt;-->
<!--            <van-button round class="cart-button cart-button-receive" size="mini" v-on:click="logistics(order)">查看物流</van-button>-->
<!--            <van-button round class="cart-button cart-button-receive" size="mini" v-on:click="bind(order)">绑定样本</van-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-panel>-->
    </div>
<!--    <div v-else class="no-order">-->
<!--      <span>您还没有相关订单</span>-->
<!--    </div>-->
    <div v-if="orders.length === 0 " class="no-order" v-cloak>
      <span>{{message}}</span>
    </div>
  </div>
</template>

<script>
import { Panel, Toast, Button, Actionsheet, CellGroup, Cell, Steps, Step } from 'vant'
export default {
  name: 'orders-unreceive',
  components: {
    [Panel.name]: Panel,
    [Button.name]: Button,
    [Actionsheet.name]: Actionsheet,
    [Steps.name]: Steps,
    [Step.name]: Step,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell
  },
  data () {
    return {
      message: '没有相关订单哦',
      show: false,
      radio: '1',
      orders: [],
      selectedOrder: null
    }
  },
  async created () {
    await this.getOrders()
  },
  methods: {
    async getOrders (type) {
      const { data } = await this.$api.order.orderList()
      console.log(data)
      if (data.code !== 200) {
        Toast(data.desc)
      } else {
        this.orders = data.data.filter(item => [1, 2, 3, 4].includes(item.state))
        console.log(this.orders)
      }
    },
    // 查看物流/
    logistics (order) {
      this.show = true
      this.selectedOrder = order
    },
    // 绑定样本
    bind (order) {
      this.$router.push({ name: 'bind', params: { id: order.id } })
    }
  }
}
</script>

<style lang="less">
  [v-cloak]
  {
    display:none!important;
  }
  .van-panel__content {
    padding-left: 20px;
  }
  .van-panel__footer {
    text-align: right;
    .van-button {
      margin-left: 5px;
    }
  }
  .no-order {
    text-align: center;
    margin-top: 50px;
  }
  .cart-button-receive{
    float: right;
    margin: 0 0 0 5px;
  }
  /*图片布局*/
  .cart-thumb{
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    margin-right: 0.625rem;
    -webkit-box-flex: 0;
    /*-webkit-flex: none;*/
    flex: none;
    -webkit-box-align: center;
    /*-webkit-align-items: center;*/
    align-items: center;
    -webkit-box-pack: center;
    /*-webkit-justify-content: center;*/
    justify-content: center;
  }
  /*图片样式*/
  .cart-image{
    border: 0;
    max-width: 100%;
    height: 70px;
  }
  /*购物内容描述的样式*/
  .cart-content{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 5.625rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
  }
  /*商品名的div*/
  .cart-title{
    margin-top: 5px;
    line-height: 1rem;
    max-height: 2rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
